<template>
	<view class="container">
		<view>
			<tui-tabs :tabs="tabsItems" :unlined="true" :currentTab="currentTab" :isFixed="true" bottom="50%"
				backgroundColor="#5677FC" color="#fff" selectedColor="#5677FC" :sliderWidth="146"
				:sliderHeight="52" sliderBgColor="#fff" @change="tabChange"></tui-tabs>
		</view>
		<view  id="shuizhi" v-show="currentTab==0">
			<tui-tabs  :unlined="true" :backgroundColor="backgroundColor" sliderBgColor="#fff"  selectedColor="#fff" color="#fff" :tabs="tabsStations" :currentTab="tabsStation"
				@change="stationTabChange"></tui-tabs>
			<tui-table :borderRight="false" :borderLeft="false" :borderTop="false">
				<tui-tr backgroundColor="#00aaff">
					<tui-td bold :span="5" borderWidth="0" alignItems="center" textAlign="center"  color="#FFF">参数</tui-td>
					<tui-td :borderRight="false" bold :span="19" ellipsis padding="0">
						<tui-td  borderWidth="0"  bold borderBottom :borderRight="false" alignItems="center"
							textAlign="center" color="#FFF">站点</tui-td>
						<tui-tr borderWidth="0" backgroundColor="#00aaff">
							<tui-td  borderWidth="0"   color="#FFF" v-for="item in stationQualitys" bold alignItems="center"
								textAlign="center">{{item.name}}</tui-td>
						</tui-tr>
					</tui-td>
				</tui-tr>
				<tui-tr :backgroundColor="index%2!=0?'#eaf6ff':'#ffffff'" v-for="(item,index) in qualityinfos" :key="item.qid">
					<tui-td :span="5" alignItems="center">{{item.name}}</tui-td>
					<tui-td padding="0" :span="19" border-width="0">
						<tui-tr :backgroundColor="index%2!=0?'#eaf6ff':'#ffffff'" borderWidth="0">
							<tui-td v-for="station in stationQualitys">
								<text>{{getStationQualityInfo(station.id,item.qid)}}</text>
								<text class="time">23:22</text>
							</tui-td>
						</tui-tr>
					</tui-td>
				</tui-tr>
			</tui-table>
		</view>
		<view id="zhamen" v-show="currentTab==1">
			闸门
		</view>
		<view id="流量" v-show="currentTab==2">
			流量
		</view>
	</view>
</template>


<script setup>
	import {
		ref
	} from 'vue'
	import {
		onReady
	} from '@dcloudio/uni-app'
	const backgroundColor = ref('linear-gradient(90deg, rgb(0, 170, 255), rgb(0, 170, 255))')
	const currentTab = ref(0)
	const tabsItems = ref([{
			name: "水质",
		},
		{
			name: "闸门",
		},
		{
			name: "流量"
		}
	])
	const tabsStation = ref(0)
	const tabsStations = ref([{
			name: "奎河"
		},
		{
			name: "故黄河"
		},
		{
			name: "不牢河"
		},
		{
			name: "骆马湖"
		},
		{
			name: "小沿河"
		}
	])
	const stationQualitys = ref([{
			id: "1",
			name: "黄茅岗",
			qualitys: [{
					qid: '1',
					name: "水温",
					value: '23.5',
					time: '23:22'
				}, {
					qid: '2',
					name: "电导率",
					value: '2.5',
					time: '23:22'
				},
				{
					qid: '3',
					name: "PH",
					value: '7.5',
					time: '23:22'
				},
				{
					qid: '4',
					name: "电导率",
					value: '83.5',
					time: '23:22'
				},
				{
					qid: '5',
					name: "浊度",
					value: '3.5',
					time: '23:22'
				},
				{
					qid: '6',
					name: "总磷",
					value: '2.5',
					time: '23:22'
				},
				{
					qid: '7',
					name: "总氮",
					value: '23.5',
					time: '23:22'
				},
				{
					qid: '8',
					name: "氨氮",
					value: '23.5',
					time: '23:22'
				},
				{
					qid: '9',
					name: "高猛酸盐指数",
					value: '23.5',
					time: '23:22'
				}
			]
		},
		{
			id: "2",
			name: "河道管理所",
			qualitys: [{
					qid: '1',
					name: "水温",
					value: '23.5',
					time: '23:22'
				}, {
					qid: '2',
					name: "电导率",
					value: '2.5',
					time: '23:22'
				},
				{
					qid: '3',
					name: "PH",
					value: '7.5',
					time: '23:22'
				},
				{
					qid: '4',
					name: "电导率",
					value: '83.5',
					time: '23:22'
				},
				{
					qid: '5',
					name: "浊度",
					value: '3.5',
					time: '23:22'
				},
				{
					qid: '6',
					name: "总磷",
					value: '2.5',
					time: '23:22'
				},
				{
					qid: '7',
					name: "总氮",
					value: '23.5',
					time: '23:22'
				},
				{
					qid: '8',
					name: "氨氮",
					value: '23.5',
					time: '23:22'
				},
				{
					qid: '9',
					name: "高猛酸盐指数",
					value: '23.5',
					time: '23:22'
				}
			]
		},
		{
			id: "3",
			name: "调蓄池",
			qualitys: [{
					qid: '1',
					name: "水温",
					value: '23.5',
					time: '23:22'
				}, {
					qid: '2',
					name: "电导率",
					value: '2.5',
					time: '23:22'
				},
				{
					qid: '3',
					name: "PH",
					value: '7.5',
					time: '23:22'
				},
				{
					qid: '4',
					name: "电导率",
					value: '83.5',
					time: '23:22'
				},
				{
					qid: '5',
					name: "浊度",
					value: '3.5',
					time: '23:22'
				},
				{
					qid: '6',
					name: "总磷",
					value: '2.5',
					time: '23:22'
				},
				{
					qid: '7',
					name: "总氮",
					value: '23.5',
					time: '23:22'
				},
				{
					qid: '8',
					name: "氨氮",
					value: '23.5',
					time: '23:22'
				},
				{
					qid: '9',
					name: "高猛酸盐指数",
					value: '23.5',
					time: '23:22'
				}
			]
		},
		{
			id: "4",
			name: "欣欣路",
			qualitys: [{
					qid: '1',
					name: "水温",
					value: '23.5',
					time: '23:22'
				}, {
					qid: '2',
					name: "电导率",
					value: '2.5',
					time: '23:22'
				},
				{
					qid: '3',
					name: "PH",
					value: '7.5',
					time: '23:22'
				},
				{
					qid: '4',
					name: "电导率",
					value: '83.5',
					time: '23:22'
				},
				{
					qid: '5',
					name: "浊度",
					value: '3.5',
					time: '23:22'
				},
				{
					qid: '6',
					name: "总磷",
					value: '2.5',
					time: '23:22'
				},
				{
					qid: '7',
					name: "总氮",
					value: '23.5',
					time: '23:22'
				},
				{
					qid: '8',
					name: "氨氮",
					value: '23.5',
					time: '23:22'
				},
				{
					qid: '9',
					name: "高猛酸盐指数",
					value: '23.5',
					time: '23:22'
				}
			]
		}
	])
	const qualityinfos = ref([{
			qid: '1',
			name: "水温",
			value: '23.5',
			time: '23:22'
		}, {
			qid: '2',
			name: "电导率",
			value: '4.66',
			time: '23:22'
		},
		{
			qid: '3',
			name: "PH",
			value: '7.65',
			time: '23:22'
		},
		{
			qid: '4',
			name: "电导率",
			value: '100.5',
			time: '23:22'
		},
		{
			qid: '5',
			name: "浊度",
			value: '24.05',
			time: '23:22'
		},
		{
			qid: '6',
			name: "总磷",
			value: '90.5',
			time: '23:22'
		},
		{
			qid: '7',
			name: "总氮",
			value: '23.5',
			time: '23:22'
		},
		{
			qid: '8',
			name: "氨氮",
			value: '23.5',
			time: '23:22'
		},
		{
			qid: '9',
			name: "高猛酸盐指数",
			value: '23.5',
			time: '23:22'
		}
	])
	onReady(() => {
		currentTab.value = 0
		console.log('onReady')
	})

	function tabChange(e) {
		currentTab.value = e.index
	}

	function stationTabChange(e) {
		tabsStation.value = e.index
	}

	function findFirstInJSON(data, conditions, deep = false) {
		// 检查是否为数组
		if (Array.isArray(data)) {
			for (const item of data) {
				// 递归检查数组中的每个元素
				const result = findFirstInJSON(item, conditions, deep);
				if (result) return result;
			}
			return null;
		}

		// 检查是否为对象
		if (typeof data === 'object' && data !== null) {
			// 检查当前对象是否匹配条件
			let isMatch = true;
			for (const [key, value] of Object.entries(conditions)) {
				if (data[key] !== value) {
					isMatch = false;
					break;
				}
			}
			if (isMatch) return data;

			// 如果需要深度搜索，递归检查子对象
			if (deep) {
				for (const value of Object.values(data)) {
					const result = findFirstInJSON(value, conditions, deep);
					if (result) return result;
				}
			}
		}

		return null;
	}

	function getStationQualityInfo(stationId, qid) {
		const stationQuality = findFirstInJSON(stationQualitys.value, {
			id: stationId
		});
		console.log(stationQuality)
		console.log(qid)
		if (stationQuality != null) {

			const quality = findFirstInJSON(stationQuality.qualitys, {
				qid: qid
			})
			console.log(quality.value)
			return quality == null ? "" : quality.value
		}
		return ""
	}
</script>
<style>
	.container {
		padding: 70rpx 0 0 0;
		box-sizing: border-box;
	}

	.tui-table__middle {
		display: inline-flex;
		align-items: stretch;
		flex-wrap: wrap;
		flex-direction: column;
		align-content: space-around;
		justify-content: center;
		align-items: center;
	}

	.time {
		font-size: 20rpx;
	}
</style>